<template>
	<view>
		<!-- 顶部 -->
		<view style="height: 10px;"></view>
		 <!-- style="background-color: #F9F7F4 !important; z-index: 99999;" -->
		<view class="topcontainer">
			<!-- 左侧图标 -->
			<view>
				<navigator url="/pages/first/first" open-type="navigateBack">
					<image src="/static/home.png" mode="widthFix" class="log"></image>
				</navigator>
			</view>
			<!-- 右侧标题 -->
			<view>
				<text class="title">{{name1}}</text>
			</view>
		</view>
		<!-- 影片信息 -->
		<view class="messagecontainer">
			<!-- 左侧：图片 -->
			<view>
				<image :src="src" mode="widthFix" class="img"></image>
			</view>
			<!-- 右侧：信息 -->
			<view class="right">
				<!-- 中文标题 -->
				<view>
					<text class="Chinesehead">{{name}}</text>
				</view>
				<!-- 英文标题 -->
				<view>
					<text class="Englishhead">{{yingwen}}</text>
				</view>
				<!-- 排行榜 -->
				<view class="block">
					<text class="block1">{{paihang}}</text>
					<text class="block2">{{bangs}}</text>
				</view>
				<!-- 标签 -->
				<view>
					<text class="tags">{{types}}</text>
				</view>
				<!-- 想看&在看&看过 -->
				<view class="yasuo">
					<!-- 想看 -->
					<view>
						<image src="/static/want.png" mode="widthFix" class="width"></image>想看
					</view>
					<!-- 在看 -->
					<view>
						<image src="/static/zai.jpg" mode="widthFix" class="width"></image>在看
					</view>
					<!-- 看过 -->
					<view>
						<image src="/static/see.png" mode="widthFix" class="width"></image>看过
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "detailcomponent",
		props: {
			src: {
				type: String,
				default: () => {
					return ''
				}
			},
			name: {
				type: String,
				default: () => {
					return '目中无人'
				}
			},
			name1: {
				type: String,
				default: () => {
					return '目中无人'
				}
			},
			yingwen: {
				type: String,
				default: () => {
					return ''
				}
			},
			types: {
				type: String,
				default: () => {
					return ''
				}
			},
			paihang: {
				type: String,
				default: () => {
					return ''
				}
			},
			bangs: {
				type: String,
				default: () => {
					return ''
				}
			}
		},
		data() {
			return {

			};
		},
		methods: {
			returnback() {
				console.log('to page1');

				// 入栈导航
				uni.navigateTo({
					url: '/../../pages/first/first',
					success: () => {
						console.log('导航成功');
					}
				})
			}
		}
	}
</script>

<style>
	.topcontainer {
		margin-top: 20px;
		padding: 0px 2px;
		height: 70px;
		background-color: #F9F7F4;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
/* 		top: 0;
		right: 0;
		left: 0;
		background-color: #ff5500;
		position: fixed; */
	}

	.log {
		margin-left: -80px;
		margin-top: 10px;
		width: 50px;
	}

	.title {
		font-size: 16px;
		font-style: initial;
		margin-left: 25px;
		/* margin-top: 30px; */
	}

	.messagecontainer {
		padding: 10rpx 21rpx;
		display: flex;
		flex-direction: row;
		/* margin-top: 0px; */
	}

	.img {
		width: 105px;
		border-radius: 3%;
	}

	.Chinesehead {
		font-size: 20px;
		font-style: unset;
		font-weight: 800;
	}

	.right {
		margin-left: 10px;
	}

	.right>view {
		margin-top: 5px;
	}

	.right>view.block {
		padding: 5px 0px;
	}

	.Englishhead {
		font-size: 14px;
		color: #9B9C97;
	}

	.tags {
		font-size: 10px;
		color: #9B9C97;
	}

	.block1 {
		background-color: #FCE1B5;
		border: 3px solid #FCE1B5;
		border-radius: 8%;
	}

	.block2 {
		background-color: #FFC876;
		border: 3px solid #FFC876;
		border-radius: 8%;
	}

	.yasuo {
		display: flex;
		flex-direction: row;
		flex-shrink: 0;

	}

	.width {
		width: 13px;
	}

	.yasuo>view {
		height: 35px;
		box-shadow: 0 0 10px #efecea;
		border: 1px solid #efefe8;
		background-color: white;
		border-radius: 10%;
		padding: 0 15px;
		margin-right: 5px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 10px;
	}
</style>